import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm, Select,Menu, Dropdown, Icon,  } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
import { imgUrl } from '../../config/system';
import PresetModal from '../../components/equipment/PresetModal';
import PresetDetailModal from '../../components/equipment/PresetDetailModal';
import PresetViewModal from '../../components/equipment/PresetViewModal';
import PresetInfoDetailModal from '../../components/equipment/PresetInfoDetailModal';
import ExportDetailModal from '../../components/equipment/ExportDetailModal';

function Preset({ dispatch, preset, loading, form }) {

  const { currentItem, modalVisible, modalType,detailModalType,importModalVisible,
     assetModelList,assetTypeTree,modalViewVisible,assetBrandList,modalDetailVisible,detailInfoModalType,modalDetailInfoVisible } = preset

  const columns = [{
    title: '清单号',
    dataIndex: 'id_',
    key: 'id_',
    width: 120,
  },{
    title: '合同号',
    dataIndex: 'contractNo',
    key: 'contractNo',
    width: 120,
  },{
    title: '供应商',
    dataIndex: 'supplier',
    key: 'supplier',
    width: 80,
  },{
    title: '联系人',
    dataIndex: 'contacts',
    key: 'contacts',
    width: 100,
  },{
    title: '联系电话',
    dataIndex: 'contactsPhone',
    key: 'contactsPhone',
    width: 100,
  },{
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 60,
    render: (value, row, index) => {
        return (
            value==1?"未处理":value==2?"处理中":value==3?"已完成":''
        )
      }
  },{
    title: '所在位置',
    dataIndex: 'roomName',
    key: 'roomName',
    width: 100,
  },{
    title: '操作员',
    dataIndex: 'createUser',
    key: 'createUser',
    width: 80,
  },{
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 100,
  },{
    title: '操作',
    key: 'operation',
    width: 100,
    render: (text, record) => (
        <span>
            <a onClick={onViewItem.bind(null, record.id_)}>查看</a>
           
            {(record.status==1)?(
              <span>     
                  <span className="ant-divider" />        
                  <Dropdown overlay={
                      <Menu>
                          <Menu.Item>
                            <a onClick={onEditDetailItem.bind(null, record.id_)}>编辑详情</a>
                          </Menu.Item>
                          <Menu.Item>
                            <a onClick={onEditItem.bind(null, record.id_)}>编辑</a>
                          </Menu.Item>
                          <Menu.Item>
                              <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                              <a>删除</a>
                              </Popconfirm>
                          </Menu.Item>         
                      </Menu>
                      }>
                
                  <a className="ant-dropdown-link">
                      操作<Icon type="down" />
                  </a>
                </Dropdown>

              </span>
            ):(record.status==2)?(
              <span>
                <span className="ant-divider" />        
                <Dropdown overlay={
                    <Menu>
                        <Menu.Item>
                          <a onClick={onEditDetailItem.bind(null, record.id_)}>编辑详情</a>
                        </Menu.Item>                        
                        <Menu.Item>
                            <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                            <a>删除</a>
                            </Popconfirm>
                        </Menu.Item>         
                    </Menu>
                  }>              
                <a className="ant-dropdown-link">
                    操作<Icon type="down" />
                </a>
              </Dropdown>
              </span>
            ):null}
        </span>
    ),
  }];

  const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 10 },
  };

  function handleClear(){
    form.resetFields();
  }

  //查看预置详情
  const onViewItem = (presetId) => {
    dispatch({
      type: 'preset/viewDetail',
      payload:presetId,
    })
  }

  // 编辑预置详情
  const onEditDetailItem = (presetId) => {
    dispatch({
      type: 'preset/qryDetailById',
      payload:presetId,
    })
  }

  const onEditItem = (id) => {
    dispatch({
      type: 'preset/qryById',
      payload: id,
    })
  }

  function deleteHandler(id) {
    dispatch({
      type: 'preset/remove',
      payload: {id:id,search:{...getFieldsValue()}},
    });
  }

  const addHandler = () => {
    dispatch({
      type: 'preset/showModal',
      payload: {
         modalType: 'create',
      },
    })

  }

  const modalProps = {
        item: modalType === 'create' ? {} : preset.currentItem,
        visible: modalVisible,
        type: modalType,
        roomList:preset.roomList,
        contractList:preset.contractList,
        maskClosable: false,
        confirmLoading: loading,
        title: `${modalType === 'create' ? '新增预置清单' : '编辑预置清单:'+preset.currentItem.id_}`,
        wrapClassName: 'vertical-center-modal',
        newKey : preset.newKey,
        onOk (data) {
          dispatch({
              type: `preset/${modalType}`,
              payload: data,
          })
        },
        onCancel () {
          dispatch({
              type: 'preset/hideModal',
          })
        },
  }
  const modalDetailProps = {
        item: detailModalType === 'create' ? {} : preset.currentItem,
        visible: modalDetailVisible,
        type: detailModalType,
        preset:preset,
        roomList:preset.roomList,
        detailList:preset.detailList,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: detailModalType === 'create' ? '' : <div style={{fontSize:'16px'}}><span>清单号:{preset.currentItem.id_}</span><span style={{paddingLeft:'15px'}}>合同号:{preset.currentItem.contractNo}</span><span style={{paddingLeft:'15px'}}>供应商:{preset.currentItem.supplier}</span></div>,
        wrapClassName: 'vertical-center-modal',
        newKey : preset.newKey1,
        onOk (data) {
          dispatch({
              type: `preset/${detailModalType}`,
              payload: data,
          })
        },
        onCancel () {
          dispatch({
              type: 'preset/hideDetailModal',
          })
       },
       onDel (data) {
          dispatch({
              type: 'preset/delDetail',
              payload: {id:data,presetId:preset.currentItem.id_},
          })
       },
       uploadExecl (data) {
          dispatch({
              type: 'preset/delDetail',
              payload: {id:data,presetId:preset.currentItem.id_},
          })
       },

       onSelectDetailInfo (data) {
          dispatch({
              type: 'preset/qryDetailInfoById',
              payload: data,
          })
       },
      onCreateDetail (data) {
        dispatch({
            type: 'preset/createDetailInfoModal',
            payload: data,
        })
       },
      onExportDetail (data) {
        dispatch({
            type: 'preset/showExportModal',
        })
       },
  }

    const modalViewProps = {
        item:preset.currentItem,
        visible: modalViewVisible,
        detailList:preset.detailList,
        maskClosable: false,
        confirmLoading: loading,
        title: <div style={{fontSize:'16px'}}><span>清单号:{preset.currentItem.id_}</span><span style={{paddingLeft:'15px'}}>合同号:{preset.currentItem.contractNo}</span><span style={{paddingLeft:'15px'}}>供应商:{preset.currentItem.supplier}</span></div>,
        wrapClassName: 'vertical-center-modal',
        newKey : preset.newKey4,
        onCancel () {
          dispatch({
              type: 'preset/hideViewModal',
          })
       },
  }
  const modalDetailInfoProps = {
      item: detailInfoModalType === 'createDetail' ? {} : preset.currentInfoItem,
      visible: modalDetailInfoVisible,
      type: detailInfoModalType,
      assetTypeTree:assetTypeTree,
      presetId:preset.presetId,
      assetBrandList:assetBrandList,
      assetModelList:assetModelList,
      roomList:preset.roomList,
      detailList:preset.detailList,
      maskClosable: false,
      dispatch: dispatch,
      confirmLoading: loading,
      title: `${detailInfoModalType === 'createDetail' ? '新增清单详情' : '编辑清单详情:'+preset.currentInfoItem.assetName}`,
      wrapClassName: 'vertical-center-modal',
      newKey : preset.newKey2,
      onOk (data,form) {
        dispatch({
            type: `preset/${detailInfoModalType}`,
            payload: {data:data,presetId:preset.currentItem.id_},
            form:form,
        })
      },
      onCancel () {
        dispatch({
            type: 'preset/hideDetailInfoModal',
        })
      },
      queryAssetModel (data) {
        dispatch({
            type: 'preset/queryAssetModel',
            payload: data,
        })
      },
  }
  const modalExportProps = {
          maskClosable: false,
          visible: importModalVisible,
          presetId:preset.presetId,
          dispatch: dispatch,
          title: '清单导入',
          wrapClassName: 'vertical-center-modal',
          newKey : preset.newKey3,
          onOk (data) {
            dispatch({
                type: `preset/importExcelModalAndSelect`,
                payload: {data:data,presetId:preset.currentItem.id_},
            })
          },
          onCancel () {
            dispatch({
                type: `preset/importExcelModalAndSelect`,
                payload: {presetId:preset.currentItem.id_},
            })
          },
    }

    const pagination = {
      current:preset.current,
      pageSize:preset.currentSize,
      total: preset.total,
      showSizeChanger: true,
      showTotal: (total => '共' + preset.total + '条'),
      onShowSizeChange(current, size) {
        dispatch({
          type: 'preset/queryPreset',
          payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
        });
      },
      onChange(current) {
        dispatch({
          type: 'preset/queryPreset',
          payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':preset.currentSize} },
        });
      },
    };

  const submitHandle = () => {
      dispatch({
          type: 'preset/queryPreset',
          payload: { ...getFieldsValue() },
      });
    }

    let roomsList = [];
    for (let i = 0; i < preset.roomList.length; i++) {
      roomsList.push(<Option key={preset.roomList[i].id_}>{preset.roomList[i].name}</Option>);
    }

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
      return (
        <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >
                          <FormItem>
                              {getFieldDecorator('roomId')(
                                  <Select
                                  showSearch
                                  style={{ width: 200 }}
                                  placeholder="选择机房/库房"
                                  optionFilterProp="children"
                              >
                                  <Option value="">全部</Option>
                                  {roomsList}
                              </Select>
                              )}
                        </FormItem>

                        <FormItem>
                          {getFieldDecorator('status')(
                                  <Select
                                  showSearch
                                  style={{ width: 200 }}
                                  placeholder="选择状态"
                                  optionFilterProp="children"
                              >
                                <Option value="">全部</Option>
                                <Option value="1">未处理</Option>
                                <Option value="2">处理中</Option>
                                <Option value="3">已完成</Option>
                              </Select>
                          )}
                        </FormItem>
                        <FormItem>
                          <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                        </FormItem>
                        <FormItem>
                          <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                        </FormItem>

                        <div style={{marginTop:'-40px',textAlign:'right'}}>
                          <FormItem>
                            <Button size="large" style={{ marginRight: '10px' }} type="primary" onClick={addHandler}>新建清单</Button>
                          </FormItem>
                          <FormItem>
                             <a href={imgUrl+"/ImportTemplates.xlsx"} ><Button size="large" style={{ marginRight: '10px' }} >下载模板</Button></a>
                          </FormItem>
                        </div>
                  </Form>
              </div>

              <div style={{width:'100%',padding:"30px 20px",}}>
                  <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={preset.list} pagination={pagination}
                  />
              </div>
              <PresetModal {...modalProps} />
              <PresetDetailModal {...modalDetailProps} />
              <PresetViewModal {...modalViewProps} />
              <PresetInfoDetailModal {...modalDetailInfoProps} />
              <ExportDetailModal {...modalExportProps} />
        </div>
      </div>
    );
  }

function mapStateToProps(state) {
  return { preset : state.preset,loading:state.loading.models.preset};
}

Preset = Form.create()(Preset);

export default connect(mapStateToProps)(Preset);
